<template>
    <el-dialog
        :visible.sync="isShow"
        :before-close="handleClose"
        :title="$t('culturePlan.interdisciplinaryCourses')"
        :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-row style="height:42px" class="border-bottom">
            <el-col span="8">
                <el-input v-model="queryForm.condition" :placeholder="$t('culturePlan.courseCode')+'、'+$t('culturePlan.courseName')" size="mini" @keyup.enter.native="handelSearch">
                    <i slot="suffix" class="el-icon-search" style="margin-top:8px;" @click="handelSearch"/>
                </el-input>
            </el-col>
            <el-col span="8" offset="8">
                <el-button
                    type="primary"
                    class="float-right"
                    size="mini"
                    @click="saveCourse"
                >{{ $t('common.btn.confirm') }}</el-button>
            </el-col>
        </el-row>
        <el-table :data="courses" size="mini" border @selection-change="handleCourseChange">
            <el-table-column :selectable="isSelected" type="selection"/>
            <el-table-column :label="$t('culturePlan.courseCode')" prop="code"/>
            <el-table-column :label="$t('culturePlan.courseName')" prop="name">
                <template slot-scope="scope">
                    {{ language=='en'?scope.row.nameEn:scope.row.name }}
                </template>
            </el-table-column>
            <el-table-column :label="$t('culturePlan.studyScore')" prop="credits"/>
            <el-table-column :label="$t('culturePlan.semesterCollege')" prop="collegeI18n"/>
        </el-table>
        <el-row>
            <el-col>
                <el-pagination
                    :current-page="queryForm.pageNum_"
                    :page-sizes="[20,50,100,500,1000]"
                    :page-size="queryForm.pageSize_"
                    :total="queryForm.total_"
                    layout="total, sizes, prev, pager, next, jumper"
                    style="float:right;margin-top:10px;white-space:normal;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </el-col>
        </el-row>
    </el-dialog>
</template>
<script>
import {
    transdisciplinaryCourseList,
    saveTransdisciplinaryCourse
} from 'common/src/api/culture/culturePlan'
import {
    graduateDegreeList
} from 'common/src/api/culture/eduProfession'
export default {
    props: {
        isShow: { type: Boolean, required: true },
        student: { type: Object, required: true },
        interCollegeCourses: { type: Object, default: () => [] }
    },
    data() {
        return {
            queryForm: { pageNum_: 1, pageSize_: 20, total_: 0, condition: '' },
            courses: [],
            currentCourse: [],
            majorList: []
        }
    },
    computed: {
        language() {
            return this.$store.getters.language
        }
    },
    watch: {
        isShow: function(_n, _o) {
            if (_n) this.selectCourse()
            else {
                this.courses = []
                this.currentCourse = []
            }
        }
    },
    mounted() {
        this.bindMajorList()
    },
    methods: {
        // handleCurrentChange(val) {
        //     this.queryForm.pageNum_ = val
        //     this.selectCourse()
        // },
        // handleSizeChange(val) {
        //     this.queryForm.pageSize_ = val
        //     this.selectCourse()
        // },
        handleCourseChange(val) {
            this.currentCourse = val
        },
        handleClose() {
            this.$emit('change-visible')
        },
        // saveCourse() {
        //   if (this.currentCourse.length == 0) {
        //     this.$message({ type: 'waring', message: '请选择课程' })
        //     return
        //   }
        //   let courseCodes = this.currentCourse.map((ele) => ele.code)
        //   let data = {
        //     studentId: this.student.studentId,
        //     trainingLevel: this.student.trainingLevelCode,
        //     courseCodeList: courseCodes,
        //   }
        //   saveTransdisciplinaryCourse(data).then((res) => {
        //     if (res.code == 200) {
        //       this.$emit('reloadPlan')
        //       this.$message({
        //         type: 'success',
        //         message: '操作成功',
        //       })
        //     }
        //   })
        // },
        saveCourse() {
            if (this.currentCourse.length == 0) {
                this.$message({ type: 'waring', message: this.$t('culturePlan.chooseCourseCrossFaulty.chooseCourse') })
                return
            }
            const courseCodes = this.currentCourse
            this.$emit('reloadPlan', courseCodes)
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.selectCourse()
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.selectCourse()
        },
        handelSearch() {
            this.queryForm.pageNum_ = 1
            this.queryForm.pageSize_ = 20
            this.queryForm.total_ = 0
            this.selectCourse()
        },
        selectCourse() {
            this.queryForm.studentId = this.student.studentId
            this.queryForm.trainingLevel = this.student.trainingLevelCode
            this.queryForm.majorCodeList = this.majorList
            transdisciplinaryCourseList(this.queryForm).then((res) => {
                if (res.code == 200) {
                    this.courses = res.data.list
                    this.queryForm.total_ = res.data.total_
                }
            })
        },
        isSelected(row, index) {
            return !this.interCollegeCourses.find(item => item.code === row.code)
        },
        bindMajorList() {
            if (!this.student.departmentCode) {
                console.log('departmentCode is null')
                return
            }
            console.log('departmentCode is ' + this.student.departmentCode)
            var param = { college: this.student.departmentCode, pageNum_: 1, pageSize_: 200 }
            graduateDegreeList(param).then(res => {
                if (res.code == 200) {
                    this.majorList = res.data.list.map(o => o.code)
                }
            })
        }
    }
}
</script>
